<script setup lang="ts">
import store from '@/store'
import apiServe from '@/api'
import PATH from '@/router/path'

import SearchForm from '@/components/Search/SearchForm.vue'
import BasicTable from '@/components/Table/BasicTable.vue'
import CreateDialog from './components/CreateDialog/index.vue'

// store
const basicListStore = store.useBasicListStore()
const saveStore = () => {
  basicListStore.saveState({
    searchData,
    currentPage: pageInfo.currentPage
  })
}
const loadStore = () => {
  // 从 store 拿存的数据
  Object.assign(searchData, basicListStore.searchData)
  Object.assign(searchDataConfirm, searchData)
  pageInfo.currentPage = basicListStore.currentPage
  // 拿到数据就进行重置 store
  basicListStore.resetState()
}
onMounted(() => {
  loadStore()
})

// 搜索数据
const initSearchData = () => ({
  name: '',
  tel: '',
  type: '',
  day: ''
})
const searchOptions = reactive({
  typeList: [
    { label: '舒适性', value: 1 },
    { label: '经济性', value: 2 },
  ]
})
// 当前搜索框中的内容
const searchData = reactive(initSearchData())
// 实际已经生效的搜索框内容
// 区分这两种 searchData 是为了处理类似下面的情况
// 例如改了搜索内容，但是没点搜索，去点翻页，这时候生效的是 searchDataConfirm 而不是 searchData
const searchDataConfirm = reactive(initSearchData())
// 重置
const resetSearchForm = () => {
  Object.assign(searchData, initSearchData())
}
// 搜索
const search = () => {
  Object.assign(searchDataConfirm, searchData)
  pageInfo.currentPage = 1
  loadData()
}

// table 复选
const selectedIds = ref<any[]>([])
const selectedRows = ref<any[]>([])
const clearTableSelected = () => {
  selectedIds.value = []
  selectedRows.value = []
}
const changeTableSelected = (rows: any[]) => {
  selectedIds.value = rows.map(item => item.id)
  selectedRows.value = rows
}

// 计算序号
const indexMethod = (index: number) => {
  const { currentPage, pageSize } = pageInfo
  return (currentPage - 1) * pageSize + index + 1
}

// 页码信息
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10
})
const changePage = (currentPage: number) => {
  pageInfo.currentPage = currentPage
  loadData()
}

const loading = ref(true)
const tableData = ref([])
// 获取数据
const loadData = () => {
  clearTableSelected()
  Object.assign(searchData, searchDataConfirm)
  const { name, tel, type, day } = searchDataConfirm
  const { currentPage, pageSize } = pageInfo
  loading.value = true
  apiServe.table.getTableList({
    name,
    tel,
    type,
    day,
    currentPage,
    pageSize
  }).then((res) => {
    const { total, list } = res
    pageInfo.total = total
    tableData.value = list
  }).finally(() => {
    loading.value = false
  })
}
onMounted(() => {
  loadData()
})

// 详情
const router = useRouter()
const toDetail = (row: Recordable) => {
  saveStore()
  router.push(`${PATH.list.basicDetail}/${row.id}`)
}

// 创建、编辑
const createDialogRef = ref()
const openCreateDialog = (row = null) => {
  createDialogRef.value.show(row)
}
const onCreate = () => {
  pageInfo.currentPage = 1
  loadData()
}

// 删除
const del = (row: Recordable) => {
  // eslint-disable-next-line no-console
  console.log(row)
  ElMessageBox.confirm(
    '确定删除此项？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('删除成功')
    loadData()
  }).catch(() => {})
}
</script>

<template>
  <div class="list_page_template_global">
    <div class="search_part">
      <SearchForm
        :loading="loading"
        @search="search"
        @reset="resetSearchForm"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="searchData.name"
            clearable
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="手机">
          <el-input
            v-model="searchData.tel"
            clearable
            placeholder="请输入手机号码"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="searchData.type"
            :clearable="true"
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in searchOptions.typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchData.day"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
      </SearchForm>
    </div>
    <div class="table_part">
      <BasicTable
        v-loading="loading"
        :data="tableData"
        row-key="id"
        :page-info="pageInfo"
        @selection-change="changeTableSelected"
        @change-page="changePage"
      >
        <template #tool>
          <el-button @click="openCreateDialog()">创建</el-button>
          <el-button>导入</el-button>
          <el-button>导出</el-button>
        </template>
        <el-table-column
          type="selection"
          align="center"
          width="50"
        />
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          align="center"
          width="60"
        />
        <el-table-column
          prop="id"
          label="id"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="address"
          label="地址"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="date"
          label="出生日期"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="130"
        >
          <template #default="{ row }">
            <div class="operation">
              <el-link
                type="primary"
                @click="openCreateDialog(row)"
              >
                编辑
              </el-link>
              <el-link
                type="warning"
                @click="toDetail(row)"
              >
                详情
              </el-link>
              <el-link
                type="danger"
                @click="del(row)"
              >
                删除
              </el-link>
            </div>
          </template>
        </el-table-column>
      </BasicTable>
    </div>
    <CreateDialog
      ref="createDialogRef"
      @on-create="onCreate"
      @on-edit="loadData"
    />
  </div>
</template>

<style scoped lang="less">

</style>
